import React, { FC, useRef, useMemo } from 'react'
import { useNavigate, useParams } from 'react-router-dom'
import { Space, Button, Typography, Input, Tooltip, message, Popover } from 'antd'
import type { InputRef } from 'antd'
import { LeftOutlined, CopyOutlined, QrcodeOutlined } from '@ant-design/icons'
// *二维码
import QRCode from 'qrcode.react'
// *样式
import styles from './StateHeader.module.scss'

// *引入获取问卷信息的hook
import useGetPageInfo from '../../../hooks/useGetPageInfo'

const { Title } = Typography

const StateHeader: FC = () => {
  const nav = useNavigate()
  const { id } = useParams()
  //*获取问卷标题
  const { title, isPublished } = useGetPageInfo()

  // * 拷贝链接
  const urlInputRef = useRef<InputRef | null>(null) //在这里提供初始值为 null 的引用
  function copyLink() {
    // 拷贝
    const inputElement = urlInputRef.current
    if (inputElement == null) return
    inputElement.select() //选中input的内容
    document.execCommand('copy') //拷贝选中内容 (富文本编辑器的操作)
    message.success('复制成功')
  }

  // TODO 生成问卷 链接和二维码
  // function genLinkAndQRCodeElem() {
  //   if (!isPublished) return null

  //   //* 拼接url 参考C端的规则
  //   const url = `http://localhost:3000/question/${id}`

  //   // 定义二维码组件
  //   const QRCodeElem = (
  //     <div style={{ textAlign: 'center' }}>
  //       <QRCode value={url} size={150} />
  //     </div>
  //   )

  //   return (
  //     <Space>
  //       <Input value={url} style={{ width: '300px' }} ref={urlInputRef} />
  //       <Tooltip title="复制链接">
  //         <Button icon={<CopyOutlined />} onClick={copyLink}></Button>
  //       </Tooltip>
  //       <Popover content={QRCodeElem}>
  //         <Button icon={<QrcodeOutlined />}></Button>
  //       </Popover>
  //     </Space>
  //   )
  // }

  // * 使用useMemo 1.依赖项是否经常变化 2.缓存的元素是否创建成本较高
  const LinkAndQRCodeElem = useMemo(() => {
    if (!isPublished) return null
    //拼接url 参考C端的规则
    const url = `http://localhost:3000/question/${id}`
    // 定义二维码组件
    const QRCodeElem = (
      <div style={{ textAlign: 'center' }}>
        <QRCode value={url} size={150} />
      </div>
    )
    return (
      <Space>
        <Input value={url} style={{ width: '300px' }} ref={urlInputRef} />
        <Tooltip title="复制链接">
          <Button icon={<CopyOutlined />} onClick={copyLink}></Button>
        </Tooltip>
        <Popover content={QRCodeElem}>
          <Button icon={<QrcodeOutlined />}></Button>
        </Popover>
      </Space>
    )
  }, [id, isPublished])

  return (
    <div className={styles['header-wrapper']}>
      <div className={styles.header}>
        <div className={styles.left}>
          <Space>
            <Button type="link" icon={<LeftOutlined />} onClick={() => nav(-1)}>
              返回
            </Button>
            <Title>{title}</Title>
          </Space>
        </div>
        <div className={styles.main}>{LinkAndQRCodeElem}</div>
        <div className={styles.right}>
          <Button type="primary" onClick={() => nav(`/question/edit/${id}`)}>
            编辑问卷
          </Button>
        </div>
      </div>
    </div>
  )
}

export default StateHeader
